<template>
	<view class="c-container no-border c-container-item">
		<swiper :style="{height: swiperHeight + 'px'}" :indicator-dots="true">
			<swiper-item v-for="(item, index) in table" :key="index">
				<view class="swiper-item-box" :id="`table-${index}`">
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">{{item.modify_type}}</view>
							<view class="col-text">{{item.table_amount}}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">餐标</view>
							<view class="col-text">{{item.table_price}}</view>
						</view>
					</view>
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">优惠金额</view>
							<view class="col-text">{{item.banquet_discount}}</view>
						</view>
						<view class="c-row-col">
							<view class="col-title">费用总计</view>
							<view class="col-text">{{item.banquet_totals}}</view>
						</view>
					</view>
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">签约时间</view>
							<view class="col-text">{{item.sign_date}}</view>
						</view>
					</view>
					<view class="c-row" v-if="item.remark">
						<view class="c-row-col">
							<view class="col-title">备注</view>
							<view class="col-text col-remark">{{item.remark}}</view>
						</view>
					</view>
					<view class="c-row" v-if="item.images.length > 0">
						<view class="c-row-col">
							<view class="col-title">附件列表</view>
							<view class="col-text col-text-img-box">
								<image class="col-img" v-for="(img, imgIndex) in item.images" :key="imgIndex" :src="img" @click="previewImg({list:item.images,index: imgIndex})"></image>
							</view>
						</view>
					</view>
					<view class="c-row">
						<view class="c-row-col">
							<view class="col-title">审核状态</view>
							<view class="col-text" :style="{ color: status[item.item_check_status].color }">
								{{status[item.item_check_status].title}}
							</view>
						</view>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {getSwiperMaxHeight} from '@/utils/funs.js';
	
	export default {
		props: {
			parent: {
				type: Object
			},
			table: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				swiperHeight:0,
				status: {
					0: {
						title: '待审核',
						color: '#999'
					},
					1: {
						title: '审核中',
						color: '#999'
					},
					2: {
						title: '审核通过',
						color: '#409EFF'
					},
					3: {
						title: '审核驳回',
						color: 'red'
					},
					13: {
						title: '已撤销',
						color: '#999'
					}
				}
			}
		},
		beforeMount() {
			this.getSwiperMaxHeight = getSwiperMaxHeight;
		},
		mounted() {
			let table = this.table;
			table.forEach((ele,index) => {
				let id = `#table-${index}`;
				this.getSwiperMaxHeight(this, id);	
			});
		},
		methods: {
			// 预览图片
			previewImg(data) {
				uni.previewImage({
					urls: data.list,
					current: data.index
				})
			}
		}
	}
</script>

<style lang="less">
	@import url('../../common.less');
</style>
